import { t } from 'i18next'
import React, { useMemo, useRef } from 'react'
import { Modal, Button, RadioGroup, CheckBox, Space } from '@kedacom/react-next'
import { StyledWrap } from './style'
import VmpPoll from './VmpPoll'
import VmpPlan from './VmpPlan'
import MemberList from '@/components/MemberList'
import useService from './service'
import { useTvWallStore } from './store'
import View from './ThumbnailView'
import BoxView from './boxView'
import { useMccStore } from '../../store'
import { useGlobalStore } from '@/store/global'
export default function TVwall() {
	const {
		isOpen,
		mode,
		is_editing,
		handleModifyIn,
		handleModifyOut,
		handleCloseTvwallModal,
		show_mt_name,
		state,
		setHduShowName,
		show_batch_poll,
		handleChangeMode,
	} = useTvWallStore((state) => ({
		mode: state.mode,
		show_mt_name: state.show_mt_name,
		isOpen: state.isOpen,
		is_editing: state.is_editing,
		batch_poll: state.batch_poll,
		show_batch_poll: state.show_batch_poll,
		updateData: state.updateData,
		state: state.state,
		handleModifyIn: state.handleModifyIn,
		handleModifyOut: state.handleModifyOut,
		handleCloseTvwallModal: state.handleCloseTvwallModal,
		update: state.update,
		setHduShowName: state.setHduShowName,
		handleChangeMode: state.handleChangeMode,
	}))
	const disabled = useMemo(() => state === 1 && !is_editing, [is_editing, state])
	const superMtNum = useMccStore((state) => state.mccInfo.superMtNum)
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const { pollRef, planRef, handleStartbatchPoll, handleModifyApply } = useService()
	const BoxViewRef = useRef<{} | null>(null)
	return (
		<Modal
			className="mcc-tvwall-modal"
			open={isOpen}
			title={t('电视墙')}
			width={858}
			height={628}
			needFooter={false}
			onCancel={handleCloseTvwallModal}
		>
			<StyledWrap className="mcc-vmp-modal-wrap">
				<div style={{ display: 'flex' }}>
					<div className="left-panel">
						<div className="line-wrap line-wrap-plan">
							<VmpPlan
								ref={planRef}
								getPollParam={() => {
									return pollRef.current?.getValue() || null
								}}
								testPollParam={() => {
									return pollRef.current?.testValue() || false
								}}
							/>
						</div>
						<div className="line-wrap line-wrap-view">
							<View />
						</div>
						<div className="line-wrap line-wrap-mode">
							<div>{t('电视墙模式')}</div>
							<RadioGroup
								className="mode"
								value={mode}
								options={[
									{ label: t('定制画面'), value: 1, width: 130 },
									{ label: t('批量轮询'), value: 2, width: 130 },
								]}
								onChange={(e, value) => {
									handleChangeMode(value)
								}}
							/>
							<div className="show-mt-name-check-box">
								<CheckBox
									className="name-setting"
									disabled={disabled}
									checked={Boolean(show_mt_name)}
									onChange={(e, val) => {
										setHduShowName(!!val)
									}}
								>
									{t('显示终端名称')}
								</CheckBox>
							</div>
						</div>
						<div className="box-view-content">
							<BoxView disabled={disabled} ref={BoxViewRef} />
						</div>
					</div>
					<div className="right-panel">
						{mode === 1 && (
							<MemberList
								canDrag={state === 0 || is_editing}
								height={superMtNum || !SWITCH.showOftenMt ? 450 : 426}
							/>
						)}
						{mode === 2 && (
							<VmpPoll
								ref={pollRef}
								pollData={show_batch_poll ?? null}
								disabled={disabled}
								handleStartbatchPoll={handleStartbatchPoll}
							/>
						)}
					</div>
				</div>
				<div className="setting-footer">
					<div className="tip">
						<span className="icon"></span>
						{t('请拖拽与会方至指定的画面中')}
					</div>
					<Space className="right-btn">
						{!is_editing && (
							<>
								{/* 非编辑状态 批量轮询 */}
								{state === 1 && <Button onClick={handleModifyIn}>{t('编辑')}</Button>}
								{/* 非编辑状态 批量轮询 */}
								<Button onClick={handleCloseTvwallModal}>{t('关闭')}</Button>
							</>
						)}
						{/* (1)批量轮询状态（2）编辑中 */}
						{!!is_editing && state === 1 && (
							<>
								<Button onClick={handleModifyApply}>{t('应用')}</Button>
								<Button onClick={handleModifyOut}>{t('退出编辑')}</Button>
							</>
						)}
					</Space>
				</div>
			</StyledWrap>
		</Modal>
	)
}
